<template>
  <div>
    <el-row type="flex" justify="center" align="center">
      <el-col :span="8" class="check-group">
        <template v-for="(item, index) in columConfig">
          <el-checkbox
            v-model="item.checked"
            @change="handleClick(null, null, item)"
            >{{ item.label ?? item.prop }}</el-checkbox
          >
        </template>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-button icon="el-icon-refresh" @click="handleRefresh"
          >重置</el-button
        >
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100px">
      <template v-for="(item, index) in columConfig">
        <!-- 循环生成列 -->
        <el-table-column
          v-if="item.checked"
          :prop="item.prop"
          :label="item.label ?? item.prop"
          :key="index"
          v-bind="item.othersConfig"
        >
          <slot :name="item.prop"></slot>
          <!-- 自定义生成表头 -->
          <template slot="header" slot-scope="scope">
            <el-checkbox
              v-model="item.checked"
              @change="handleClick(scope.column, scope.$index, item)"
              >{{ item.label ?? item.prop }}</el-checkbox
            >
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ["tableData", "columConfig"],
  methods: {
    handleClick(column, index, item) {
      this.$emit("checkbox-click", [column, index, item]);
    },
    handleRefresh() {
      this.$emit("refresh");
    },
  },
};
</script>

<style lang="less" scoped>
.check-group {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
